<script setup lang='ts'>
import ExpandBtn from '@/components/expand-btn.vue'
import { computed, ref, toRefs } from 'vue'

const props = defineProps<{
    data: any
    type: 'image' | 'select' | 'text'
}>()

const emts = defineEmits(['colClick', 'dropClick'])

const { data, type } = toRefs(props)

const expand = ref(true)

const show = computed(() => {
    return data.value.length > 8
})

const getData = computed(() => {
    const arr = data.value.slice(0, 8)
    return expand.value ? arr : data.value
})

function colClick(item: any) {
    emts('colClick', item)
}

function dropClick(item: any) {
    emts('dropClick', item)
}
</script>

<template>
    <el-row :gutter="20">
        <el-col :span="21"
                class="!flex !flex-wrap !items-center"
        >
            <el-col v-for="(child, idx) in getData"
                    :key="idx"
                    :span="3"
                    class="search-col c-#767676 truncate cursor-pointer"
                    :title="child.label"
            >
                <img v-if="type === 'image'"
                     :src="child.img"
                     :alt="child.label"
                     class="brand-icon mb-10 mr-20 mr-40 h-40 w-120"
                     @click="colClick({ item: child, i: idx })"
                >

                <el-dropdown v-else-if="type === 'select'">
                    <span class="el-dropdown-link">
                        {{ child.label }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
                    </span>

                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item v-for="(item, i) in child.option"
                                              :key="`${idx}-${i}`"
                                              @click="dropClick({ item, i })"
                            >
                                {{ item.label }}
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>

                <span v-else
                      class="text-14 lh-40"
                      @click="colClick({ item: child, i: idx })"
                >{{ child.label }}</span>
            </el-col>
        </el-col>

        <el-col :span="3"
                class="pt-4 text-right"
        >
            <ExpandBtn v-if="show"
                       v-model="expand"
                       :label="['展示更多', '收起']"
                       class="px-12 py-5 border-1 border-#C9CDD4 rounded-4"
            />
        </el-col>
    </el-row>
</template>

<style lang="less" scoped>
.search-col {
    &:hover {
        color: #da0004;
    }

    .brand-icon {
        &:hover {
            border: 1px solid #da0004;
        }
    }
}
</style>
